body {
	background: #000;
    color: #ffffff;
    width: 100%;
    height: 100%;
}

.main {
	width: 100%;
    height: 100%;
}

.rotate {
	font-size: 32px;
	margin: 34px;
	width: 80px;
	text-align: center;
	color: red;
}

.timers {
	background-color:#222;
	margin:-186px auto;
	text-align:center;
}

.message{
	margin:-136px auto;
    text-align:center;
    font-size: 32px;
    text-align: center;
    color: #FFD4D4;
}
  
.note{
    margin-left:auto;
    margin-right:auto;
    margin-top:-168px;
    margin-bottom:100px;
    text-align:center;
    font-size: 26px;
    text-align: center;
    color: #D4D4FF;
}

.recipe{
    margin-left:auto;
    margin-right:auto;
    margin-top:-280px;
    margin-bottom:100px;
    text-align:center;
    font-size: 10px;
    text-align: center;
    color: #D4D4FF;
}

  
/*via http://cssarrowplease.com/*/    
.arrow_box {
	width: 200px;
    height: 110px;
    margin: auto;
    margin-top: 140px;
    position: relative;
    background: #734e51;
    border: 4px solid #ae6f74;
}

.arrow_box:after, .arrow_box:before {
	left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
    border-left-color: #734e51;
    border-width: 30px;
    top: 50%;
    margin-top: -30px;
}

.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
    border-left-color: #ae6f74;
    border-width: 36px;
    top: 50%;
    margin-top: -36px;
}
 
.digit, .colon{
	position:relative;
  	display:inline-block;
  	width:10px;
  	height:110px;
  	margin:5px;
}

.colon{
	background: -webkit-linear-gradient(-0deg, #82FA58 10px, transparent 10px),
              	-webkit-linear-gradient(-0deg, #82FA58 10px, transparent 10px);

	background-position: 0 40px, 0 65px;
  	background-repeat:no-repeat;
  	background-size:10px 10px, 10px 10px;
}

.digit{
  width:60px;
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /*  Top  */
                   	-webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /* Middle*/
                   	-webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /* Bottom*/
                   	-webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #333 50px),   /* Topleft */
                   	-webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #333 50px);   /* Bottomleft */
  
  	background-position: 0 0, 0 50px, 0 100px, 0 10px, 0 60px;
  	background-repeat:no-repeat;
  	background-size:60px 10px, 60px 10px, 60px 10px, 60px 40px, 60px 40px;
}

.zero{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Bottom*/          
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}

.one{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /* Bottom*/          
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}

.two{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Bottom*/          
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #333 50px);   /* Bottomleft */
}

.three{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Bottom*/          
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}

.foure{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /* Bottom*/          
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}

.five{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Bottom*/
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #333 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}


.six{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Bottom*/
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #333 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}


.seven{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #333 10px, #333 50px, transparent 50px),   /* Bottom*/
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}


.eight{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Bottom*/
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}

.nine{
  background-image: -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /*  Top  */
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Middle*/
                    -webkit-linear-gradient(0deg, transparent 10px, #82FA58 10px, #82FA58 50px, transparent 50px),   /* Bottom*/
                    -webkit-linear-gradient(0deg, #82FA58 10px, transparent 10px, transparent 50px, #82FA58 50px),   /* Topleft */
                    -webkit-linear-gradient(0deg, #333 10px, transparent 10px, transparent 50px, #82FA58 50px);   /* Bottomleft */
}

.dots{
  width:600px;
  margin:auto;
  height:60px;
  padding-top: 5px;
}

.dot {
	width:60px;
	height:52px;
	border-radius:30px;
	background:#222;
	
	-webkit-animation-duration:3s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-play-state:running;
}

.reddot {
  	float: right;
  	-webkit-animation-name:reddotanimation;
	-webkit-animation-delay:2s;
}

.bluedot {
  	float:left;
  	-webkit-animation-name:bluedotanimation;
	-webkit-animation-delay:2s;
}

.greendot {
  	margin:auto;
  	-webkit-animation-name:greendotanimation;
	-webkit-animation-delay:1s;
}

@-webkit-keyframes reddotanimation /* Safari and Chrome */
{
0%   {background:#222;}
50%  {background:red;}
}

@-webkit-keyframes bluedotanimation /* Safari and Chrome */
{
0%   {background:#222;}
50%  {background:blue;}
}

@-webkit-keyframes greendotanimation /* Safari and Chrome */
{
0%   {background:#222;}
50%  {background:#82FA58;}
}